<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
</head>
<body>
    <div id="app"> </div>
    <script type="text/babel">
    /*
    jsx语法3
      jsx中所有的元素都要闭合
      - JSX语法外层必须有且只有一个外层父元素
    - 标签的首字母
        - 如果是小写,则认为是html提供的标签
        - 如果是大写,则认为是一个组件
        - jsx中注释:{/* <Hello/> ✳/}
        
    */
       const vDOM=(
            <div className="outer">
            <h1>JSX</h1>
            <p >JSX贼方便 </p>
            <br/>
            <input type="text" />
            <p>今天的天气真热啊</p>
            {/* <Hello/> */}
           </div>
       );
        // 创建容器并渲染虚拟DOM
        ReactDOM.createRoot(document.getElementById('app')).render(vDOM)
        </script>
</body>
</html>